<template>
	<view class="msg_detail">
		<NavigationTitle title="消息详情" style="color: #000;background: #fff;position: fixed;width: 100%;z-index: 5;">
			<template slot="left_con">
				<image class="back_icon" src="@/static/common/back.png" mode="widthFix" @tap="backSelf" />
			</template>
		</NavigationTitle>
		<view class="status-bar"></view>
		<view class="main">
			<view style="display: flex; align-items: center; justify-content: space-between;">
				<view class="item">
					<text class="title">发送人:</text>
					<view class="msgContent">{{data.senderName}}</view>
				</view>
				<view class="item">
					<text class="title">发送时间:</text>
					<view class="msgContent">{{data.messageDate}}</view>
				</view>
			</view>
			<view class="item">
				<text class="title">内容:</text>
				<view class="msgContent">{{data.messageContent}}</view>
				<view class="msgImg" v-if="data.messageFile">
					<image :src="v" v-for="(v,i) in getFileArr(data.messageFile)" :key="i"
						@click="()=>showBigImage(v)" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import NavigationTitle from '@/components/navigationTitle'
	import {
		showToastMsg,
	} from '@/utils/format.js'
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	export default {
		components: {
			NavigationTitle
		},
		computed: {
			...mapGetters(['projectId', 'msgData'])
		},
		data() {
			return {
				data: {},
			}
		},
		onShow() {
			console.log(this.msgData)
			this.data = this.msgData
			// this.getFileArr(data.messageFile)
		},
		onLoad() {

		},
		methods: {
			backSelf() {
				uni.navigateBack({
					delta: 1
				})
				this.read(this.data)
			},
			showBigImage(e) {
				uni.previewImage({
					urls:[e]
				})
			},
			getFileArr(str) {
				if (!str) return []
				let arr = str.split(',')
				console.log(arr)
				return arr
			},
			async read(data) {
				let arr = [
					{
						messageId:data.messageId,
						msgStatus:"2"
					}
				]
				await this.$api.updateMessage(arr).then(res => {
					console.log(res.msg)
				}).catch(err => {
					console.log(err)
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/assets/styles/global.scss';

	view {
		box-sizing: border-box;
	}

	.msg_detail {
		position: relative;
		height: 100%;
	}

	.main {
		// padding-top:;
		padding: $System__title_height 20rpx 0;

		.item {
			margin-top: 20rpx;

			.title {
				font-size: 36rpx;
				font-weight: 600;
			}

			.msgContent {}

			.msgImg {}
		}

	}

	.back_icon {
		width: 37upx;
	}
</style>